<template>
	<view class="container">
		<view class="subsection_box" v-for="(e,index) in list" :key="index"
			@click="sectionChange(index,e)">
			<view class="subsection_title" :style="{color:current == index?'#EA4445':'#808080'}">
				{{e.name || e}}
			</view>
			<view class="subsection_line" v-show="current == index"></view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'subsection-list',
		props: {
			// 
			current:{
				type: [Number, String],
				default: 0
			},
			// 列表
			list:{
				type:Array,
				default:[]
			},
		},
		data(){
			return{
				currentIndex:this.current
			}
		},
		watch: {
			current: {
				immediate: true,
				handler(nVal) {
					this.currentIndex = nVal;
				}
			}
		},
		methods:{
			//选项卡切换
			sectionChange(index, e) {
				this.currentIndex = index;
				this.$emit("sectionChange",index,e);
			},
		}
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 70rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		color: #808080;
	}
	.subsection_box{
		overflow: hidden;
		position: relative;
	}
	.subsection_title{
		width: 200rpx;
		height: 70rpx;
		font-size: 24rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 70rpx;
	}
	.subsection_line{
		position: absolute;
		bottom: -6rpx;
		left: 90rpx;
		width: 16rpx;
		height: 8px;
		background: #EA4445;
		border-radius: 50%;
	}
</style>